<template>
  <div class="uni-login-error-tips">
    <transition-group name="uni-error-list" tag="div">
      <div class="uni-error-list-item" v-for="key in keyList" :key="key">{{errorMap[key]}}</div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'ErrorTips',
  components: {},
  props: {
    errorMap: {
      required: true,
      type: Object
    },
    prop: {
      required: false,
      type: String
    }
  },
  data () {
    return {

    }
  },
  watch: {},
  computed: {
    keyList(){
      let keyList = []
      if(this.prop){
        keyList = Object.keys(this.errorMap).filter(key => this.errorMap[key] !== '' && key === this.prop)
      }else{
        keyList = Object.keys(this.errorMap).filter(key => this.errorMap[key] !== '')
      }
      return keyList
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  },
  beforeDestroy () {
  }
}
</script>
<style scoped lang="scss">
.uni-login-error-tips{
  color: #E62335;
  line-height: 1.2;
  .uni-error-list-item{
    font-size: 12px;
    line-height: 1.2;
  }
}
.uni-error-list-item {
  display: inline-block;
}
.uni-error-list-enter-active{
  transition: all .3s;
}
.uni-error-list-leave-active {
  transition: all 0s;
}
.uni-error-list-enter, .uni-error-list-leave-to
  /* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(5px);
}
</style>
